<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-06-20 11:03:55
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-07-24 15:50:38
 * @FilePath: \honglian-video-phone-center\src\components\Common\TabsNav.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div id="tabs-bar-container" class="tabs-bar-container">
        <el-tabs v-model="tabActive" type="card" class="tabs-content" @tab-click="handleTabClick"
            @tab-remove="handleTabRemove">
            <el-tab-pane v-for="item in store.visitedRoutes" :key="item.path" :label="item.meta.title" :name="item.path"
                :closable="isAffix()"></el-tab-pane>
        </el-tabs>
        <el-dropdown @command="handleCommand">
            <span style="cursor: pointer">
                <el-icon size="18">
                    <Menu />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu slot="dropdown" class="tabs-more">
                    <el-dropdown-item command="closeOtherstabs">
                        <el-icon>
                            <Close />
                        </el-icon>
                        关闭其他
                    </el-dropdown-item>
                    <el-dropdown-item command="closeLefttabs">
                        <el-icon>
                            <Back />
                        </el-icon>
                        关闭左侧
                    </el-dropdown-item>
                    <el-dropdown-item command="closeRighttabs">
                        <el-icon>
                            <Right />
                        </el-icon>
                        关闭右侧
                    </el-dropdown-item>
                    <el-dropdown-item command="closeAlltabs">
                        <el-icon>
                            <Close />
                        </el-icon>
                        关闭全部
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { PiniaStore } from '../../store'
import { useRoute, useRouter } from 'vue-router'
import path from 'path'
import { useMeanStore } from '../../store/menus'
const meanStore = useMeanStore()
const Router = useRouter()
const router = useRoute()
const store = PiniaStore()
interface PropsType {
    //   是否需要更多按钮
    label?: string
    span?: number
    count: number
}
const props = withDefaults(defineProps<PropsType>(), {
    label: '',
    span: 6,
    count: 1
})
const affixtabs = ref<any>()
const tabActive = ref<any>('')
watch(
    () => router,
    (newValue, oldValue) => {
        inittabs()
        addtabs()
        Innit()
    },
    { deep: true }
)
const Innit = () => {
    let tabIndex = ''
    store.visitedRoutes.forEach((item: any) => {
        if (item.path === router.path) {
            tabIndex = item.path
        }
    })
    tabActive.value = tabIndex
}
// 初始化
const inittabs = () => {
    const arr: any = (affixtabs.value = filterAffixtabs(meanStore.menuList))
    for (const tag of arr) {
        if (tag.name) {
            let target = store.visitedRoutes.find((item: any) => item.path === router.path)
            if (target) {
                // 获取当前的路由路径fullPath
                if (router.fullPath !== target.fullPath) Object.assign(target, router)
                return
            }
            store.visitedRoutes.push(Object.assign({}, router))
        }
    }
}
const filterAffixtabs = (routes: any, basePath = '/') => {
    let tabs: any = []
    routes.forEach((route: any) => {
        if (route.meta && route.meta.affix) {
            const tagPath = path.resolve(basePath, route.path)
            tabs.push({
                fullPath: tagPath,
                path: tagPath,
                name: route.name,
                meta: { ...route.meta },
            })
        }
        if (route.children) {
            const temptabs = filterAffixtabs(route.children, route.path)
            if (temptabs.length >= 1) {
                tabs = [...tabs, ...temptabs]
            }
        }
    })
    return tabs
}
const addtabs = async () => {
    const title = router.meta.title
    if (title) {
        let target = store.visitedRoutes.find((item: any) => item.path === router.path)
        if (target) {
            if (router.fullPath !== target.fullPath) Object.assign(target, router)
            return
        }
        store.visitedRoutes.push(Object.assign({}, router))
    }
    return false
}
const handleTabClick = (tab: any) => {
    const route = store.visitedRoutes.filter((item: any, index: number) => {
        if (tab.index == index) return item
    })[0]
    if (router.path !== route.path) {
        Router.push({
            path: route.path,
            query: route.query,
        })
    } else {
        return false
    }
}
const isAffix = () => {
    return store.visitedRoutes.length == 1 ? false : true
}
const handleTabRemove = async (tabActive: any) => {
    let view: any = {}
    store.visitedRoutes.forEach((item: any, index: number) => {
        if (tabActive == item.path) {
            view = item
        }
    })
    await delVisitedRoute(view)
    if (isActive(view)) {
        toLastTag(store.visitedRoutes, view)
    }
}
const delVisitedRoute = async (view: any) => {
    store.visitedRoutes.forEach((item: any, index: number) => {
        if (item.path === view.path) {
            store.visitedRoutes.splice(index, 1)
        }
    })
}
const toLastTag = (visitedRoutes: any, view: any) => {
    const latestView = visitedRoutes.slice(-1)[0]
    if (latestView) {
        Router.push(latestView)
    } else {
        Router.push('/home')
    }
}
const isActive = (route: any) => {
    return route.path === router.path
}
const handleCommand = (command: any) => {
    if (command === 'closeOtherstabs') {
        closeOtherstabs()
    } else if (command === 'closeLefttabs') {
        closeLefttabs()
    } else if (command === 'closeRighttabs') {
        closeRighttabs()
    } else if (command === 'closeAlltabs') {
        closeAlltabs()
    }
}
const toThisTag = async () => {
    const view = store.visitedRoutes.filter((item: any, index: number) => {
        if (item.path === router.fullPath) {
            return item
        }
    })[0]
    if (router.path !== view.path) Router.push(view)
    return view
}
// 关闭其他
const closeOtherstabs = async () => {
    const view: any = await toThisTag()
    store.visitedRoutes = store.visitedRoutes.filter(
        (item: any) => item.meta.affix || item.path === view.path
    )
}
// 关闭左侧导航
const closeLefttabs = async () => {
    const view: any = await toThisTag()
    let index = store.visitedRoutes.length
    store.visitedRoutes = store.visitedRoutes.filter((item: any) => {
        if (item.name === view.name) index = store.visitedRoutes.indexOf(item)
        return item.meta.affix || index <= store.visitedRoutes.indexOf(item)
    })
}
// 关闭右侧
const closeRighttabs = async () => {
    const view: any = await toThisTag()
    let index = store.visitedRoutes.length
    store.visitedRoutes = store.visitedRoutes.filter((item: any) => {
        if (item.name === view.name) index = store.visitedRoutes.indexOf(item)
        return item.meta.affix || index >= store.visitedRoutes.indexOf(item)
    })
}
// 关闭全部
const closeAlltabs = async () => {
    const view: any = await toThisTag()
    store.visitedRoutes = store.visitedRoutes.filter((item: any) => item.meta.affix)
    if (affixtabs.value.some((tag: any) => tag.path === view.path)) {
        return
    }
    toLastTag(store.visitedRoutes, view)
}
onMounted(() => {
    addtabs()
    Innit()
})
</script>
<style lang="scss" scoped>  .tabs-bar-container {
      position: relative;
      box-sizing: border-box;
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      padding-right: 20px;
      padding-left: 20px;
      user-select: none;
      background: #ffffff;
      border-top: 1px solid #f6f6f6;

      :deep(.fold-unfold) {
          margin-right: 20px;
      }

      .tabs-content {
          width: calc(100% - 20px);
          height: 48px;



          :deep() {

              .el-tabs__nav-next,
              .el-tabs__nav-prev {
                  width: 40px;
                  height: 48px;
                  line-height: 48px;
                  z-index: 999;
                  background: #ffffff;
              }

              .el-tabs__header {
                  border-bottom: 0;

                  .el-tabs__nav {
                      border: 0;
                  }

                  .el-tabs__item {
                      box-sizing: border-box;
                      margin-right: 5px;
                      height: 38px;
                      line-height: 38px;
                      border: none;
                      border-radius: 4px;
                      transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
                      margin-top: 9px;
                      color: #929395;
                      border-radius: 10px 10px 0px 0px;

                      &.is-active {
                          border: none;
                          background: #E8F4FF;
                          color: #2C68FF;

                          .is-icon-close {
                              background-color: #2C68FF;
                              color: #ffffff;
                          }
                      }
                  }

                  .el-tabs__item:hover {
                      background: #F2F3F5;
                  }
              }
          }
      }

      .more {
          display: flex;
          align-content: center;
          align-items: center;
          cursor: pointer;
      }
  }
</style>
<style>
.is-scrollable::before {
    content: '';
    width: 27px;
    height: 48px;
    background: linear-gradient(270deg, #F3F7FF 0%, rgba(251, 251, 251, 0) 100%);
    position: absolute;
    top: 0px;
    right: 40px;
    z-index: 999;
}

.is-scrollable::after {
    content: '';
    width: 27px;
    height: 48px;
    background: linear-gradient(270deg, rgba(251, 251, 251, 0) 0%, #F3F7FF 100%);
    position: absolute;
    top: 0px;
    left: 40px;
    z-index: 999;
}
</style>
  